<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/layout">Layout</router-link></li>
        <li><router-link to="/user/100?age=200">/user/100</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
    <script>
      const Layout = {
        template: `
        <div>
            <router-view name="header"></router-view>
            <router-view></router-view>
            <router-view name="footer"></router-view>
        </div>
        `,
      };
      const Home = {template:'<div>Home</div>'}
      const User = {
        props:['userId','age','customAttr'],//表示接收属性 $route.params.userId,$route.query.age
        template:`
            <div>
                <p>userId:{{userId}}</p>
                <p>age:{{age}}</p>
                <p>customAttr:{{customAttr}}</p>
            </div>
        `
      }
      //此处放的是路由的配置数组
      var routes = [
        {name:'home',path:'/',component:Home,alias:'/home'},//alias就是别名，小名的意思
        {name:'a',path:'/a',redirect:'/'},//可以直接跳转某个路径里
        {name:'b',path:'/b',redirect:{name:'home'}},//可以直接跳到某个命名路由中
        {name:'c',path:'/c',redirect:()=>{return '/'}},//还可以是一个函数，函数的返回值是一个路径
        {
          path: "/layout",
          component: Layout,
          children: [
            {
              path: "",
              //一个路径对应的了多个视图，可以给每个视图起一个名字
              components: {
                header: { template: "<div>Header</div>" },
                default: { template: "<div>main</div>" }, //默认视图
                footer: { template: "<div>Footer</div>" },
              }
            }
          ]
        },
        {
            name:'user',
            path:"/user/:userId",
            component:User,
            //props:true//props=true的意思是让路由把$route.params上的属性传递给组件
            //props:{customAttr:'自定义属性'},//静态属性
            props:$route=>{
                console.log($route)
                return {userId:$route.params.userId,age:$route.query.age,customAttr:'自定义属性'};
            }
        }
      ];
      Vue.use(VueRouter);
      var router = new VueRouter({routes});

      var vm = new Vue({
        el: "#app",
        router,
      });
      /**
       * $route
        fullPath: "/user/100?age=200"  当前路径
        hash: "#top" 
        matched=[] 匹配到的路由
        name: "user" 匹配到的路由的名称
        params:{userId: '100'} 路径参数，就是放在路径里传递的参数
        path: "/user/100" 路径
        query: {age: '200'} 查询对象
     */
    </script>
  </body>
</html>
